import G6 from '@antv/g6'
import graphEvent from "./graphEvent.js";
import grid from './plugins/grid'
import tooltip from './plugins/tooltip'
import {customCircle} from "./customCircle.js";
import {graphParams} from './graphParams'
import {message} from "ant-design-vue";
import {rawData} from './index'

G6.registerNode("cusCircle", customCircle, "circle")

class graphG6 extends graphEvent {
    constructor(params) {
        const {domNode, graphData, layoutOptions, legendExample, isNewData} = params
        super(legendExample)
        this.domNode = domNode
        this.width = domNode.clientWidth
        this.height = domNode.clientHeight
        this.graphData = graphData
        this.layoutOptions = layoutOptions
        this.legendExample = legendExample
        this.isNewData = isNewData
        this.graphExample = undefined
    }

    // 初始化图谱
    initGraph() {
        if (this.graphExample) this.destroyGraph()
        let options = {
            container: this.domNode,
            width: this.width,
            height: this.height,
            linkCenter: false,
            fitCenter: true,
            enabledStack: true,
            animate: false,
            plugins: [grid(), this.legendExample],
            modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
            },
        }
        if (this.isNewData) {
            Object.assign(options, graphParams(this.layoutOptions))
        }
        this.graphExample = new G6.Graph(options);
        // 绑定图谱默认事件
        super.initBindEvent(this.graphExample)
        // 读取数据
        this.graphExample?.data(this.graphData);
        // 图谱开始渲染
        this.graphExample?.render();
        // 缩放自适应
        window.onresize = () => this.graphResize()
        // 设置节点的状态颜色
        this.graphExample.getNodes().forEach(v => {
            const fillColor = v.getModel().style.fill
            const params = {
                fill: fillColor,
                stroke: fillColor,
                shadowColor: fillColor
            }
            Object.assign(v.get('styles').active, params)
        })
        // 设置边的状态颜色
        this.graphExample.getEdges().forEach(v => {
            const strokeColor = v.getModel().style.stroke
            const params = {
                stroke: strokeColor,
                shadowColor: strokeColor
            }
            Object.assign(v.get('styles').active, params)
        })
    }

    // 图谱自适应
    graphResize() {
        if (!this.graphExample || this.graphExample.get('destroyed')) return;
        if (!this.domNode || !this.domNode.clientWidth || !this.domNode.clientHeight) return;
        this.graphExample.changeSize(this.domNode.clientWidth, this.domNode.clientHeight);
        this.graphExample.fitCenter()
    }

    // 搜索相关节点
    searchItem(params) {
        super.searchItem(params);
    }

    // 切换布局
    changeLayout(cfg) {
        this.graphExample.getNodes().forEach(v => {
            delete v.getModel().fx
            delete v.getModel().fy
            delete v.getModel().x
            delete v.getModel().y
        })
        this.graphExample.updateLayout(cfg)
    }

    // 銷毀图谱
    destroyGraph() {
        this.graphExample?.destroy()
        this.graphExample = undefined
        window.onresize = null
    }

    // 工具栏方法
    toolBar(v) {
        // 放大
        if (v === 'enlarge') {
            const data = this.graphExample.getZoom() + 0.1
            this.graphExample.zoomTo(data);
            this.graphExample.fitCenter()
        }
        // 缩小
        if (v === 'narrow') {
            const data = this.graphExample.getZoom() - 0.1
            this.graphExample.zoomTo(data);
            this.graphExample.fitCenter()
        }
        // 居中
        if (v === 'center') {
            this.graphExample.fitCenter()
        }
        // 全屏
        if (v === 'requestFullscreen') {
            this.domNode?.requestFullscreen().then()
        }
        // 退出全屏
        if (v === 'exitFullscreen') {
            document?.exitFullscreen().then();
        }
        // 下载
        if (v === 'download') {
            this.graphExample.downloadFullImage("图谱", "image/jpeg", {backgroundColor: "#fff"});
        }
        // 刷新
        if (v === 'refresh') {
            // 重新布局
            if (this.graphExample.get('layout')) {
                this.graphExample.getNodes().forEach(v => {
                    delete v.getModel().fx
                    delete v.getModel().fy
                    delete v.getModel().x
                    delete v.getModel().y
                })
                this.graphExample.layout();
            } else {
                this.graphExample.changeData(rawData);
                this.graphExample.fitCenter()
            }
        }
        // 刷新
        if (v === 'saveData') {
            localStorage.setItem('graphData', JSON.stringify(this.graphExample.save()))
            message.success("保存布局成功")
        }
    }
}

export default graphG6
